<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>分类--品类</title>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<script src="js/rem.js"></script>
		<link rel="stylesheet" href="css/master-AllSelect.css">
		<link rel="stylesheet" href="css/master-classify.css">
		<link rel="stylesheet" href="css/swiper.min.css">
		<script src="js/swiper.js"></script>
		<style>
			.classify-brandC .right .pic{
				margin-bottom:0.1rem;
			}
			.classify-brandC .right .pic h3{
				overflow: hidden;
			}
			.classify-brandC .right .pic h3 span{
				display: inline-block;width:0.64rem;
				height:1px;background:#101010;
				float: left;
				vertical-align: middle;
				margin-top:0.18rem;
			}
			.classify-brandC .right .pic h3 span:nth-child(1){
				margin-left:1.52rem;
			}
			.classify-brandC .right .pic h3 span:nth-child(2){
				background:none;
				height:0.4rem;font-weight: 500V;
				font-size:0.3rem;line-height:0.4rem;color:#101010;
				margin:0 0.16rem;
			}
			
			.classify-brandC .right .pic .products{
				overflow: hidden;margin-top:0.4rem;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}
			.classify-brandC .right .pic .products dl{
				width:1.54rem;text-align: center;float:left;
				margin-bottom:0.32rem;
				
				overflow: hidden;
			}
			.classify-brandC .right .pic .products dl dt{
				width:100%;overflow:hidden;margin-bottom: 0.2rem;
				height:1rem;
			}
			.classify-brandC .right .pic .products dl dd{
				font-size:0.22rem;line-height:0.3rem;
			}
			
			.products dt{
				overflow: hidden;
				position: relative;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<header id="classify-header">
				<img class="title-top" src="img/状态栏_黑.png" alt="">
				<form action="">
					<input type="text" placeholder="搜索分类、品牌、商品">
					<span class="search">&#xe60e;</span>
					
				</form>
				<ul class="h-nav">
					<li class="active">品类<span></span></li>
					<li>品牌馆<span></span></li>
				</ul>
			</header>
			<main class="classify-brandC" style="display: block;">
				<ul class="sideBar sideBar1">
				</ul>
				<div class="right">
					<div class="banner">
						<img src="img/cf-brand_banner.png" alt="">
					</div>
					
				</div>
			</main>
			<main class="classify-brandC">
				<ul class="sideBar sideBar2">
					<li class="active" data-url="/showBrandByPopular">
						<a href="javascript:;">热门</a><span></span>
					</li>
					<li data-url="/findAllBrand">
						<a href="javascript:;">A-Z<span></span></a>
					</li>
					<li data-url="/showBrandByCategory">
						<a href="javascript:;">按分类<span></span></a>
					</li>
					<li data-url="/showBrandByStyle">
						<a href="javascript:;">按风格<span></span></a>
					</li>
					<li data-url="/showBrandByArea">
						<a href="javascript:;">按地区<span></span></a>
					</li>
				</ul>
				<div class="right">
					<div class="banner">
						<img src="img/cf-brand_banner.png" alt="">
					</div>
					<div class="pic">
						
					</div>
				</div>
			</main>
			
			
			
			<footer id="jx-footer">
				<section>
					<dl>
						<dt>&#xf012b;<span></span></dt>
						<dd>精选<span></span></dd>
					</dl>
					<dl class="active">
						<dt>&#xe696;</dt>
						<dd>分类</dd>
					</dl>
					<dl>
						<strong>
							<span>
								<img src="img/logo.png" alt="">
								<em>时尚头条</em>
							</span>
						</strong>
					</dl>
					<dl>
						<dt>&#xf0179;</dt>
						<dd>购物车</dd>
					</dl>
					<dl>
						<dt>&#xe610;</dt>
						<dd>我的</dd>
					</dl>
				</section>
			</footer>
		</div>
		
		<script src="js/nav.js"></script>
		<script src="js/jquery-1.11.3.min.js"></script>
		<script src="js/api.js"></script>
		<script src="js/classify.js"></script>
	
	</body>
	
	
	
</html>
